import React from 'react';
import {Button, Input, List} from "antd";

import 'antd/dist/antd.css';
import './TodoListStyle.css';


//无状态组件 性能要高于普通组件
const TodoListView = (props) => {
  return (
      <div className="container">
          <div className="top-wrap">
              <Input
                  value={props.inputValue}
                  placeholder='Todo Info'
                  className="input-wrap"
                  onChange={props.handleInputChange}
              />
              <Button
                  type='primary'
                  onClick={props.handleButtonClick}
                  className="button-wrap"
              >提交</Button>
          </div>
          <List
              bordered
              dataSource={props.list}
              renderItem={(item, index) => (
                  <List.Item
                      onClick={ () => props.handleItemDelete(index) }
                  >
                      {item}
                  </List.Item>
              )}
              className="list-wrap"
          />
      </div>
  );
};

export default TodoListView;